
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const { DefinePlugin } = require('webpack')
const CopyPlugin = require('copy-webpack-plugin')
const HtmlWebpackHtml = require('html-webpack-plugin')

const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin')
module.exports = {
    watch: true,

    mode: 'development',
    devtool: 'source-map',
    entry: './src/index.js',
    target: 'web',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
    },
    devServer: {
        hot: true,
        static: {
            directory: path.join(__dirname, 'dist'),
            publicPath: '/',
        },
        port: 4000,
        // open: true,
        // compress: true,
        // historyApiFallback: true,
        // proxy: {
        //     '/api': {
        //         target: 'https://api.github.com',
        //         pathRewrite: {"^/api": ""}
        //     }
        // }
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                            esModule: false
                        }
                    },

                    'postcss-loader',
                    {
                        loader: 'px2rem-loader',
                        options: {
                            remUnit: 75,
                            remPrecision: 8
                        }

                    },

                ]
            }, {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader',
                    {
                        loader: 'px2rem-loader',
                        options: {
                            remUnit: 75,
                            remPrecision: 8
                        }

                    }
                ]
            },
            //  {
            //     test: /\.(png|svg|gif|jpe?g)$/,
            //     use: [{
            //         loader: 'file-loader',
            //         options: {
            //             esModule: false
            //         }
            //     }]
            // },

            {
                test: /\.(png|svg|gif|jpe?g)$/,
                type: 'asset',
                generator: {
                    filename: "img/[name].[hash:4][ext]"
                },
                parser: {
                    dataUrlCondition: {
                        maxSize: 30 * 1024
                    }
                }
            },
            {
                test: /\.(ttf|woff2?)$/,
                type: 'asset/resource',
                generator: {
                    filename: "font/[name].[hash:3][ext]"
                },

            }, {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            }
        ]
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
                    name: 'vendor',
                    chunks: 'all',
                },
            },
        },
    },
    optimization: {
        splitChunks: {
            //打包的最小大小 
            minSize: 0,
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'commons',
                    chunks: 'all',
                    // 最小的引用次数  如果一个函数被引用两次 就不会被抽离
                    minChunks: 3
                },
            },
        },
    },
    plugins: [
        // new CleanWebpackPlugin(),
        new HtmlWebpackHtml({
            title: '网球王子',
            template: './public/index.html',
            // chunks: ['v']
        }),
        new DefinePlugin({
            BASE_URL: '"./"'
        }),
        new CopyPlugin({
            patterns: [
                {
                    from: 'public',
                    globOptions: {
                        ignore: ["**/index.html"]
                    }
                }
            ]

        }),
        new HtmlWebpackExternalsPlugin({
            externals: [
                {
                    module: 'react',
                    entry: '//now8.gtimg.com/now/lib/16.8.6/react.min.js',
                    global: 'React',
                }, {
                    module: 'react-dom',
                    entry: '//now8.gtimg.com/now/lib/16.8.6/react-dom.min.js',
                    global: 'ReactDOM',
                }
            ],
        }),

    ],

}